import classNames from 'classnames'
import { ReactNode, memo } from 'react'
import style from './TextComponent.module.scss'

interface TextProps {
  center?: boolean
  children: ReactNode
  className?: string
  size: 'large' | 'medium' | 'small'
  tag?: 'div' | 'p' | 'span'
}

export const Text = memo(
  ({ center, children, className, size = 'medium', tag: Tag = 'p' }: TextProps) => {
    const textClasses = classNames(
      style.text,
      {
        [style.center]: center,
        [style.large]: size === 'large',
        [style.medium]: size === 'medium',
        [style.small]: size === 'small',
      },
      className,
    )

    return <Tag className={textClasses}>{children}</Tag>
  },
)

Text.displayName = 'Text '
